<template>
	<view>
		<base-paging ref="paging" :add-fad="true" :datasource="datasource" :tabs="tabs"
			@fad-click="toBasePath('/edit')">
			<template #default="{ list }">
				<template v-for="(item, index) in list" :key="index">
					<base-card :thumbnail="imag[item.flag]" :title="item.ctPersonName">
						<template #extra>
							<view style="font-size: .8em;color: #4783fc" @click="toBasePath('/detail?id=' + item.id)">
								查看详情
							</view>
						</template>

						<view>
							<view>
								<text class="label">调休时间</text>
								<text class="value">{{ item.beginTime.split(':')[0] + ' ' + item.beginTime.split(':')[1] }} ~ {{ item.endTime.split(':')[0] + ' ' + item.endTime.split(':')[1] }}</text>
							</view>
							<view>
								<text class="label">调休原因</text>
								<text class="auto-wrap value">{{ item.reason }}</text>
							</view>
						</view>

						<template #actions>
							<view style="display: flex;gap: 0 20rpx;margin-bottom: 20rpx;">
								<!-- <u-button v-if="['reject'].includes(item.flag)" text="修改" type="primary"
									@click.stop="toBasePath('/edit?edit=true&id=' + item.id)"></u-button>
								<u-button v-if="['audit'].includes(item.flag)" :plain="true" text="删除"
									@click.stop="remove(item)"></u-button> -->
									<view class="xiugai flexmid" v-if="['reject'].includes(item.flag)" @click.stop="toBasePath('/edit?edit=true&id=' + item.id)">修改</view>
									<view class="shanchu flexmid" v-if="['audit'].includes(item.flag)" @click.stop="remove(item)">删除</view>
							</view>
						</template>
					</base-card>
				</template>
			</template>
		</base-paging>
	</view>
</template>

<script>
	import {
		Msg,
		toPath
	} from "@/utils/BaseUtils";
	import {
		LeaveApi as Api
	} from "@/comms/api/leaveApi";

	export default {
		data() {
			return {
				toPath,
				// 状态 待审核:audit 已通过:agree 未通过:reject"
				imag: {
					audit: '/static/my/jz.png',
					agree: '/static/my/ytg.png',
					reject: '/static/my/jz.png'
				},
				tabs: [{
						key: 'audit',
						name: '待审核',
					},
					{
						key: 'agree',
						name: '已通过'
					},
					{
						key: 'reject',
						name: '未通过'
					},
				]
			}
		},
		mounted() {},
		onShow() {
			this.reload()
		},
		methods: {
			reload() {
				this.$refs.paging.reload();
			},
			datasource({
				pageNo,
				tab
			}) {
				return Api.page({
					pageNo,
					flag: tab.key
				})
			},
			remove({
				id
			}) {
				Msg.confirm("确定删除该调休信息?")
					.then(() => {
						Api.delete({
							id
						}).then(res => {
							this.reload();
							Msg.success("删除成功")
						})
					})
			},
			toBasePath(path) {
				toPath("/pages/mys/level" + path)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-card {
		margin-bottom: 15rpx;
	}
	::v-deep .uni-card__header{
		border-bottom: 1rpx solid #F5F7FB !important;
	}
	.xiugai{
		width: 170rpx;
		height: 70rpx;
		border: 1px solid #1c83fc;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #1C83FC;
	}
	.shanchu{
		width: 170rpx;
		height: 70rpx;
		border: 1px solid #B3B3B3;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #999999;
	}
	
	.label {
		font-size: 26rpx;
		color: #999999;
		margin-right: 30rpx;
		width: 150rpx;
	}

	.value {
		font-size: 26rpx;
		color: #333333;
	}

	.button-group {
		button {
			margin-left: 10rpx;
		}
	}

	.auto-wrap {
		/* 允许在单词内部进行换行 */
		word-break: break-all;
		/* 或者使用更现代的替代方案 */
		overflow-wrap: break-word;
		/* 现代标准写法，等同于旧版的 `word-wrap: break-word;` */
		/* 确保正常处理空白字符换行 */
		white-space: normal;
	}
</style>